import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer'),
        vue: 'vue/dist/vue.esm-bundler.js',
        'renderer-assets': resolve('src/renderer/assets')
      }
    },
    plugins: [
      vue(),
      vueJsx(),
      AutoImport({
        imports: ['vue', 'vue-router', '@vueuse/core'],
        resolvers: [ArcoResolver()],
        dts: 'auto-import.d.ts',
        eslintrc: {
          enabled: true
        }
      }),
      Components({
        resolvers: [
          ArcoResolver({
            sideEffect: true
          })
        ],
        dts: 'components.d.ts'
      })
    ],
    server: {
      host: '0.0.0.0'
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import (reference) "${resolve(
              'src/renderer/assets/style/breakpoint.less'
            )}";`
          },
          javascriptEnabled: true
        }
      }
    }
  }
})
